<template>
	<view class="container">
		<view class="steps">
			<uni-steps :options="list" active-icon="checkbox" :active="active" />
		</view>
	
		<view class="content">
			<view v-if="active === 0">
				<view class="register">
					<uni-forms
						ref="form"
						:modelValue="formData"
						validate-trigger="bind"
						:rules="accountRules"
					>
						<uni-forms-item name="name">
							<uni-easyinput
								prefixIcon="contact"
								type="text"
								v-model="formData.name"
								placeholder="请输入用户名"
							/>
						</uni-forms-item>
				
						<uni-forms-item name="email">
							<uni-easyinput
								prefix-icon="email"
								class="login-input"
								type="email"
								v-model="formData.email"
								placeholder="请输入邮箱"
							/>
						</uni-forms-item>
						<uni-forms-item name="emailCode">
							<uni-easyinput
								prefix-icon="email"
								class="login-input code"
								type="email"
								v-model="formData.emailCode"
								placeholder="请输入验证码"
							/>
							<button class="code-btn"  type="primary" @click="sendCode" :disabled="disabled">{{ btnMessage }}</button>
						</uni-forms-item>
					</uni-forms>
				</view>
				
				<view class="next">
					<button class="btn" @click="verifyForm">校验</button>
				</view>
			</view>
			<view v-if="active === 1">
				<view class="register">
					<uni-forms
						ref="passwordForm"
						:modelValue="passwordData"
						validate-trigger="bind"
						:rules="passowrdRules"
					>
						<uni-forms-item name="password">
							<uni-easyinput
								prefix-icon="locked"
								class="login-input"
								type="password"
								v-model="passwordData.password"
								placeholder="请输入密码"
							/>
						</uni-forms-item>
						<uni-forms-item name="repassword">
							<uni-easyinput
								prefix-icon="locked"
								class="login-input"
								type="password"
								v-model="passwordData.repassword"
								placeholder="请再次输入密码"
							/>
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="next">
					<button class="btn" @click="submitForm">修改密码</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import useRegisterStore from '@/store/register.js'
const registerStore = useRegisterStore()

const active = ref(0)
const list = [
	{
		title: '验证账号身份'
	},
	{
		title: '设置新密码'
	}
]	

const formData = ref({
	name: '',
	email:'',
	emailCode: ''
})

const accountRules = {
	name: {
		rules: [
			{
				required: true,
				errorMessage: '必须输入帐号信息~'
			},
			{
				pattern: /^[a-z0-9]{6,20}$/,
				errorMessage: '必须是6~20数字或字母组成~'
			}
		]
	},
	// 对email字段进行必填验证
	email: {
		rules: [
			{
				required: true,
				errorMessage: '必须输入邮箱信息~'
			},
			{
				pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
				errorMessage: '请输入正确格式的邮箱'
			}
		]
	},
	emailCode: {
		rules: [
			{
				required: true,
				errorMessage: '必须输入验证码~'
			}
		]
	}
}
const form = ref('')
// 处理发送验证码
const btnMessage = ref('发送验证码')
const disabled = ref(false)
function sendCode() {
	const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
	if(!pattern.test(formData.value.email)) {
		uni.showToast({
			title:'请正确输入邮箱',
			icon:'error'
		})
	}else {
		registerStore.sendEmailCodeAction(formData.value.email)
		disabled.value = true
		let timeNumber = 60
		btnMessage.value = `重新获取(${timeNumber})`
		const timer = setInterval(() => {
			timeNumber--
			btnMessage.value = `重新获取(${timeNumber})`
			if(timeNumber <= 0) {
				disabled.value = false
				clearInterval(timer)
				btnMessage.value = '发送验证码'
			}
		},1000)
	}
	
}

const verifyForm = () => {
	form.value
		.validate()
		.then(async (res) => {
			const { name, email, emailCode} = formData.value
			try {
				console.log(name, email, emailCode);
				const res = await registerStore.verifyExistAction({
					name,
					email,
					emailCode
				})
				active.value = 1
			} catch (err) {
				console.log(err);
				uni.showToast({
					title: err.message,
					icon: 'error'
				})
			}
		})
		.catch((err) => {
			uni.showToast({
				title: '请正确输入',
				icon: 'error'
			})
		})
}




const passwordData = ref({
	password: '',
	repassword: '',
})

const passowrdRules = {
	password: {
		rules: [
			{
				required: true,
				errorMessage: '必须输入密码信息~'
			},
			{
				pattern: /^[a-z0-9]{8,}$/,
				errorMessage: '必须是8位以上数字或字母组成'
			}
		]
	},
	repassword: {
		rules: [
			{
				required: true,
				errorMessage: '必须输入密码信息~'
			},
			{
				pattern: /^[a-z0-9]{8,}$/,
				errorMessage: '必须是8位以上数字或字母组成'
			},
			{
				validateFunction: function (rule, value, data, callback) {
					if (value !== passwordData.value.password) {
						callback('两次输入的密码必须相同~')
					}
					return true
				}
			}
		]
	},
}
const passwordForm = ref('')

function submitForm() {
	passwordForm.value
		.validate()
		.then(async (res) => {
			const { name, email, emailCode} = formData.value
			const { password } = passwordData.value
			try {
				const res = await registerStore.updatePasswordAction({
					name,
					email,
					emailCode,
					password
				})
				uni.showToast({
					title: '修改密码成功',
					icon: 'success'
				})
				uni.navigateTo({
					url:'/pages/login/login'
				})
			} catch (err) {
				console.log(err);
				uni.showToast({
					title: err.message,
					icon: 'error'
				})
			}
		})
		.catch((err) => {
			uni.showToast({
				title: '请正确输入',
				icon: 'error'
			})
		})
}







</script>

<style lang="less">
.container {
	padding: 60rpx;
	.register {
		margin-top: 50px;
	}
	/deep/ .uni-easyinput__content {
		border: none;
		background-color: red;
		border-bottom: 1rpx solid #e6e6e6;
	}
	.next {
		margin-top: 80rpx;
		.btn {
			margin-top: 100rpx;
			width: 630rpx;
			height: 80rpx;
			background: #4b96e9;
			border-radius: 40rpx;
			font-size: 32rpx;
			color: #ffffff;
		}
	}
	.code {
		position: relative;
	}
	.code-btn {
		position: absolute;
		top: 0;
		left: 370rpx;
		z-index: 100;
		width: 260rpx;
		background: #4b96e9;
		font-size: 32rpx; 
		border-radius: 50rpx;
	}
}
</style>
